<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>component gap</title>
  <script src="/vue.js"></script>
  <script type="text/x-template" id="hello-world-template">
    <div>
        <child-hood></child-hood>
        <h3>--- {{greet.title}} ---</h3>
      </div>
  </script>
</head>
<body>
  <div id="root">
    <h1 ref="h1"></h1>
    <child ref="child"></child>
    <aaa></aaa>
  </div>
  
  <script>
    Vue.component('aaa', {
      data() {
        return {
          x: 100
        }
      },
      template: `
        <div v-once>{{x}} <button @click="handleClick">click</button></div>
      `,
      mounted() {
        this.x = 200
      },
      methods: {
        handleClick() {
          this.x = 300
        }
      }
    })
    Vue.component('child-hood', {
      template: `
        <div>
          <h1>childhood</h1>
          <h3>{{greet.title}}</h3>
          <button @click="print">click</button>
        </div>
      `,
      inject: ['greet'],
      methods: {
        print() {
          // console.log('child')
          // this.$root.x = 100
          // this.$root.print()
          // this.setX()
          this.greet.say('world')
        }
      }
    })
    Vue.component('child', {
      template: '#hello-world-template',
      inject: ['greet'],
      methods: {
        print() {
          console.log('childhood')
        }
      }
    })

    var vm = new Vue({
      el: '#root',
      data: {
        x: 0
      },
      methods: {
        print() {
          console.log('root')
        }
      },
      updated() {
        console.log(this.x)
      },
      mounted() {
        console.log(this.$refs.h1)
        this.$refs.child.print()
      },
      provide() {
        return {
          x: this.x,
          setX: () => {
            this.x = 200
          },
          greet: {
            title: 'hello',
            say(msg) {
              this.title = msg
              vm.$forceUpdate()
            }
          }
        }
      }
    })
  </script>
</body>
</html>